<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <!-- 第一：导入 layui 相关的 css 文件和 js 文件 -->
    <link href="layui/css/layui.css" rel="stylesheet" type="text/css"/>
    <script src="layui/layui.js" type="text/javascript"></script>

    <style>
        
    </style>
</head>
<body>
    <!-- 
        第二：使用 layui 
        1.结构化页面 - 遵循 layui 文档提供的结构
        2.使用 layui 提供的样式 - 类样式
        3.调用 layui 提供的组件方法 - 选项/参数 - 查文档
    -->
    <div class="layui-tab" lay-filter="test-handle" lay-allowclose="true">
        <!-- 标题 -->
        <ul class="layui-tab-title">
            <!-- layui-this：默认选中，与 layui-show 结合使用 -->
            <!-- lay-id：选项卡ID，必须唯一 -->
            <li class="layui-this" lay-id="11">标签1</li>
            <li lay-id="22">标签2</li>
            <li lay-id="33">标签3</li>
            <li lay-id="44">标签4</li>
            <li lay-id="55">标签5</li>
        </ul>
        <!-- 内容 -->
        <div class="layui-tab-content">
            <div class="layui-tab-item layui-show">内容-1</div>
            <div class="layui-tab-item">内容-2</div>
            <div class="layui-tab-item">内容-3</div>
            <div class="layui-tab-item">内容-4</div>
            <div class="layui-tab-item">内容-5</div>
        </div>
    </div>
    

    <button class="layui-btn" lay-on="add">新增选项卡</button>
    <button class="layui-btn layui-bg-red" lay-on="tabDelete">删除选项卡</button>
    <button class="layui-btn layui-bg-blue" lay-on="tabChange">切换选项卡</button>

    <!-- 编写 JS 代码，实现相关的功能 -->
    <script>

        // 第一：使用 layui 提供的模块
        layui.use(function(){

            // 第二：获取具体的 layui 模块实例对象 - 便于调用其方法，实现相关的操作
            let element = layui.element;
            let util = layui.util;

            // 第三：操作
            util.on('lay-on',{
                add:function(){
                    element.tabAdd('test-handle',{
                        title:'用户管理',
                        content:'用户列表 -- CRUD操作',
                        id:66,
                        change:true
                    })
                },
                tabDelete:function(othis){
                    element.tabDelete('test-handle', '44'); // 删除：“商品管理”
                    // othis.addClass('layui-btn-disabled');
                },
                tabChange:function(){
                    // 切换到指定 tab 项
                    element.tabChange('test-handle', '33'); // 切换到：标签3
                }
            });


        })

        
    </script>
</body>
</html>